import CodeView from '../../../shared/components/CodeView';
import { getDisplayElementById } from '../../shared/helpers';
import * as VisualPickers_coverable from './coverable-content/example';
import * as VisualPickers_noncoverable from './non-coverable-content/example';
import * as VisualPickers_link from './link/example';
import * as VisualPickers_vertical from './vertical/example';

<div className="doc lead">
  A visual picker can be either radio buttons, checkboxes, or links that are visually enhanced.
</div>

<CodeView exampleOnly>
  {getDisplayElementById(VisualPickers_coverable.examples, "checkbox-group")}
</CodeView>

## Coverable Content

### Base

Coverable content comes in three sizes - small, medium (default) or large. The default uses radio buttons, allowing the user to pick only one. To allow multiple selections, follow the checkbox examples below.

#### Small

<CodeView>
  {getDisplayElementById(VisualPickers_coverable.examples, "base_small")}
</CodeView>

#### Medium

<CodeView>
  {getDisplayElementById(VisualPickers_coverable.default)}
</CodeView>

#### Large

<CodeView>
  {getDisplayElementById(VisualPickers_coverable.examples, "base_large")}
</CodeView>

### States

#### Disabled
<CodeView>
  {getDisplayElementById(VisualPickers_coverable.states, "disabled")}
</CodeView>

### Checkbox Examples

To allow users to select more than one option, use checkboxes instead of radio buttons.

#### Small Checkboxes

<CodeView>
  {getDisplayElementById(VisualPickers_coverable.examples, "checkbox-group_small")}
</CodeView>

#### Medium Checkboxes

<CodeView>
  {getDisplayElementById(VisualPickers_coverable.examples, "checkbox-group")}
</CodeView>

#### Large Checkboxes

<CodeView>
  {getDisplayElementById(VisualPickers_coverable.examples, "checkbox-group_large")}
</CodeView>

## Non Coverable Content

### Base

<CodeView>
  {getDisplayElementById(VisualPickers_noncoverable.default)}
</CodeView>

### States

#### Disabled
<CodeView>
  {getDisplayElementById(VisualPickers_noncoverable.states, "disabled")}
</CodeView>

## Link

<CodeView>
  {getDisplayElementById(VisualPickers_link.default)}
</CodeView>

## Vertical

### Base

<CodeView>
  {getDisplayElementById(VisualPickers_vertical.default)}
</CodeView>

### States

#### Disabled
<CodeView>
  {getDisplayElementById(VisualPickers_vertical.states, "disabled")}
</CodeView>
